<template>
	<view class="brand" @click="goToPath(cloudStoreInfo.id)">
		<view class="brand-image">
			<image :src="imageUrls(cloudStoreInfo.image)" class="images"></image>
		</view>
		<view class="brand-info">
			<view class="brand-info-header">
				<view class="title">
					{{ cloudStoreInfo.name }}
				</view>
				<view class="tags">
					<uni-tag :text="brandType == 0 ? '云仓配送' : '商家配送'" :inverted="true" size="mini" type="warning"></uni-tag>
				</view>
			</view>

			<view class="brand-info-midden">
				<view class="option">
					<view class="option-item" style="padding-left: 0px; border-right: 1px #f3f3f3 solid">
						<view class="item-name">起送</view>
						<view class="item-value">
							<text style="font-size: 10px">￥</text>
							20
						</view>
					</view>
					<view class="option-item">
						<view class="item-name">配送约</view>
						<view class="item-value">
							<text style="font-size: 10px">￥</text>
							1.5
						</view>
					</view>
				</view>
			</view>
			<view class="brand-info-footer" v-if="cloudStoreInfo.product.length > 0">
				<view class="shopBox">
					<view class="shopItem" @click.stop="goToShopInfo(item.id)" v-for="(item, index) in cloudStoreInfo.product" :key="item.id">
						<view class="shop-image">
							<image :src="imageUrls(item.fileUrl)" class="images"></image>
						</view>
						<view class="shopName">
							{{ item.name }}
						</view>
						<view class="shopPic">￥{{ getShopPrice(item) }}</view>
					</view>
				</view>
			</view>

			<view v-else style="text-align: center; padding: 20rpx 0px; color: #999">暂无商品~</view>
		</view>
	</view>
</template>

<script>
import { imageUrl } from '../../utils/tools.js';
export default {
	name: 'hwxcBrand',
	data() {
		return {
			ratio: 0
		};
	},
	props: {
		cloudStoreInfo: {
			type: Object,
			default: () => {}
		},

		brandType: {
			type: String,
			default: '0'
		},

		lng: {
			type: Number,
			default: 0
		},

		lat: {
			type: Number,
			default: 0
		}
	},
	mounted() {
		this.ratio = this.$store.state.commInitInfo.yyd_ratio;
	},
	methods: {
		goToPath(storeId) {
			if (this.lng && this.lat) {
				uni.navigateTo({
					url: `/pages/storeShop/storeShop?store_id=${storeId}&type=${this.brandType}&lng=${this.lng}&lat=${this.lat}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/storeShop/storeShop?store_id=${storeId}&type=${this.brandType}`
				});
			}
		},

		goToShopInfo(id) {
			uni.navigateTo({
				url: `/pages/shoppingInfo/shoppingInfo?id=${id}`
			});
		},

		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},

		getShopPrice(item) {
			return item.price != '0.00' ? item.price : item.saleprice;
		}
	}
};
</script>

<style scoped lang="scss">
@mixin flexDef {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand {
	background-color: #fff;
	border-radius: 10rpx;
	margin-top: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	padding-bottom: 0px;
	display: flex;
	font-size: 26rpx;
	color: #444;
	overflow: hidden;
	.brand-image {
		flex: 1;
		margin-right: 20rpx;
		.images {
			width: 120rpx;
			height: 120rpx;
			border-radius: 5px;
		}
	}
	.brand-info {
		width: 100%;
		overflow-y: scroll;
		.brand-info-header {
			@include flexDef;
			.title {
				font-size: 30rpx;
				color: #000;
			}
		}

		.brand-info-midden {
			@include flexDef;
			margin: 15rpx 0px;
			.option {
				display: flex;
				.option-item {
					display: flex;
					justify-content: center;
					flex-direction: column;
					padding: 0px 30rpx;
					.item-name {
						color: #999;
						font-size: 27rpx;
					}
				}
			}

			.distance {
				color: #999;
				text-align: right;
			}
		}

		.brand-info-footer {
			height: 150px;
			overflow-y: scroll;
			margin-left: -5px;
			.shopBox {
				display: flex;
				max-width: 630px;
				.shopItem {
					width: 100px;
					height: 150px;
					box-sizing: border-box;
					padding: 5px;
					.shop-image {
						width: 90px;
						height: 90px;
						border-radius: 5px;
						background-color: #f3f3f3;
						.images {
							width: 90px;
							height: 100%;
							border-radius: 5px;
						}
					}

					.shopName {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						padding: 6rpx 0px;
					}

					.shopPic {
						color: #e43927;
					}
				}
			}
		}
	}
}
</style>
